<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            background-color: rgb(8, 8, 8, 0.8);
        }

        table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        table tr {
            height: 44px;
        }

        table tr td {
            text-align: center;
            vertical-align: middle;
            color: white;
            width: 50%;
        }
        table tr td:nth-child(2) {
            text-align: left;
            vertical-align: middle;
            color: white;
            width:44%;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>透明度</td>
            <td>
                <div id="alpha" class="demo-slider"></div>
            </td>
        </tr>
        <tr>
            <td>水平拉伸</td>
            <td>
                <div id="shuipingls" class="demo-slider"></div>
            </td>
        </tr>
        <tr>
            <td>相机宽高比例</td>
            <td>
                <div id="kuangaobili" class="demo-slider"></div>
            </td>
        </tr>
        <tr>
            <td>
                <button type="button" class="layui-btn layui-btn-warm">播放</button></td>
            <td>

                <button type="button" class="layui-btn layui-btn-warm">暂停</button>
            </td>
        </tr>
    </table>

    <script src="../../layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use('slider', function () {
            var $ = layui.$
                , slider = layui.slider;

            //自定义颜色
            slider.render({
                elem: '#alpha'
                , theme: '#1E9FFF' //主题色
            });

            slider.render({
                elem: '#shuipingls'
                , theme: '#1E9FFF' //主题色
            });

            slider.render({
                elem: '#kuangaobili'
                , theme: '#1E9FFF' //主题色
            });
        });
    </script>

</body>

</html>